<template>
  <div id="dialogFrom">
    <div class="dialogFrom">
      <el-dialog
        :title="dialogFromtitle"
        :visible.sync="dialogVisible"
        :width="dialogFromNum == 0 ? '70%' : '40%'"
        class="dialog"
        :before-close="handleClose"
      >
        <div class="dialogTable" v-if="dialogFromNum == 0">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="from.treeInput"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="from.materialCodeInput"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="from.materialNameInput"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain icon="el-icon-menu"
                >查询所有</el-button
              >
              <el-button
                type="primary"
                plain
                icon="el-icon-menu"
                @click="reelectedClick"
                >连选</el-button
              >
            </el-form-item>
          </el-form>
          <el-row class="row">
            <el-col :span="4" class="col">
              <el-tree
                :data="DataOne"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-col>
            <el-col :span="18" class="col">
              <div>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button icon="el-icon-refresh">重置</el-button>
              </div>
              <div class="AddoutsourcingTable">
                <AddoutsourcingTable
                  :headData="headDataData"
                  :tableData="tableData"
                >
                  <template v-slot:materialCode="{ row }">
                    <div>{{ row.materialCode }}</div>
                  </template>
                  <template v-slot:operation="{ row }">
                    <span class="operationSelect" @click="selectData(row)"
                      >选择</span
                    >
                    <span class="operationLook">查看</span>
                  </template>
                </AddoutsourcingTable>
              </div>
            </el-col>
            <el-col class="col"></el-col>
          </el-row>
        </div>
        <div v-if="dialogFromNum == 1">
          <el-row>
            <el-col :span="8">
              <div>
                <el-input
                  placeholder="请输入内容"
                  v-model="from.locationInput"
                  clearable
                >
                </el-input>
              </div>
              <div>
                <el-tree
                  ref="tree"
                  :data="DataTwo"
                  :props="defaultProps"
                  node-key="id"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="border">
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="上级货位" v-if="IsSuperior">
                    <el-input
                      v-model="ruleForm.SuperiorStorageLocation"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="货位名称" prop="LocationName">
                    <el-input v-model="ruleForm.LocationName"></el-input>
                  </el-form-item>
                  <el-form-item label="最大重量">
                    <el-input v-model="ruleForm.MaxWeight"></el-input>
                  </el-form-item>
                  <el-form-item label="最大容积">
                    <el-input v-model="ruleForm.MaxVolume"></el-input>
                  </el-form-item>
                  <el-form-item label="货位状态">
                    <el-select v-model="ruleForm.LocationStatus">
                      <el-option
                        v-for="item in LocationStatusSelect"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      icon="el-icon-edit"
                      type="success"
                      v-if="IsSuperior"
                      @click="selectLocation"
                      >选择</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import AddoutsourcingTable from "@/ComponentsTable/AddoutsourcingTable";
export default {
  name: "dialogFrom",
  components: {
    AddoutsourcingTable,
  },
  data() {
    return {
      IsSuperior: false,
      Reelected: false,
      from: {
        treeInput: "",
        materialCodeInput: "",
        materialNameInput: "",
        locationInput: "",
      },
      ruleForm: {
        SuperiorStorageLocation: "",
        LocationName: "",
        MaxWeight: "",
        MaxVolume: "",
        LocationStatus: "1",
      },
      rules: {
        LocationName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      DataOne: [
        {
          label: "01-成品",
          children: [
            {
              label: "01-纸杯机",
            },
            {
              label: "02-配套机",
            },
            {
              label: "4-4",
              children: [
                {
                  label: "7657-京津冀",
                },
                {
                  label: "88977-牛仔",
                },
              ],
            },
          ],
        },
      ],
      DataTwo: [
        {
          id: "1",
          label: "001-成品仓",
          children: [
            {
              id: "11",
              label: "A002",
              children: [
                {
                  id: "111",
                  label: "A002-1",
                  children: [{ id: "1111", label: "建议提前" }],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      LocationStatusSelect: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "空位",
        },
        {
          value: "3",
          label: "出货",
        },
        {
          value: "4",
          label: "入货",
        },
      ],
      tableData: [
        {
          materialCode: "100010",
          materialName: "118S纸杯机",
          invAttribute: "ZY型",
          unitName: "千克",
        },
        {
          materialCode: "100011",
          materialName: "118S纸杯机",
          invAttribute: "ZY型",
          unitName: "台",
        },
        {
          materialCode: "100012",
          materialName: "118S纸杯机",
          invAttribute: "ZY型",
          unitName: "台",
        },
        {
          materialCode: "100013",
          materialName: "118S纸杯机",
          invAttribute: "ZY型",
          unitName: "吨",
        },
      ],
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    headData: {
      type: Array,
      default: () => [],
    },
    dialogFromtitle: {
      type: String,
      default: () => "",
    },
    dialogFromNum: {
      type: Number,
      default: () => 0,
    },
  },
  created() {
    console.log(this.headData);
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit("dialog", false);
      this.Reelected = false;
    },
    handleNodeClick(node) {
      let pNode = this.$refs.tree.getNode(node).parent.data;
      if (node.id != "1") {
        this.IsSuperior = true;
      } else {
        this.IsSuperior = false;
      }
      if (Array.isArray(pNode)) {
        this.ruleForm.LocationName = node.label;
      } else {
        this.ruleForm.LocationName = node.label;
        this.ruleForm.SuperiorStorageLocation = pNode.label;
      }

      console.log(pNode);
    },
    selectData(row) {
      if (this.Reelected) {
        //连选
        console.log(row);
        this.$emit("dialogFrom", { row, dialogVisible: true });
      } else {
        this.$emit("dialogFrom", { row, dialogVisible: false });
      }
    },
    reelectedClick() {
      this.Reelected = !this.Reelected;
      console.log(this.Reelected);
    },
    selectLocation() {
      this.$emit("LocationName", {
        LocationName: this.ruleForm.LocationName,
        dialogVisible: false,
      });
    },
  },
  computed: {
    headDataData() {
      return this.headData.filter((item, index) => {
        return item.transfer == true;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.dialogFrom {
  .dialog {
    .row {
      .col {
        .AddoutsourcingTable {
          margin-top: 10px;
          .operationSelect {
            color: #44a5ff;
            font-size: 13px;
            cursor: pointer;
          }
          .operationLook {
            font-size: 13px;
            color: #79c951;
            cursor: pointer;
          }
        }
      }
    }
    .border {
      margin-left: 50px;
      padding: 20px;
      width: 250px;
      border: 2px solid #ebebeb;
    }
  }
}
</style>
<style >
.dialogFrom .el-dialog__header {
  padding: 10px 20px 10px;
}
.dialogFrom .el-dialog__body {
  padding: 15px 20px;
}
.dialogFrom .dialog .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.dialogFrom .dialog .el-input__icon {
  line-height: 30px;
}
.dialogFrom .dialog .el-button {
  padding: 7px 14px;
}
.dialogFrom .dialog .el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 10px;
}

.dialogFrom .dialog .el-form-item {
  margin-bottom: 5px;
}
.dialogFrom .dialog .dialogTable .el-form-item:first-child {
  width: 170px;
}
.dialogFrom .dialog .border .el-input__inner {
}
</style>
